<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>

    <script
      crossorigin
      src="https://unpkg.com/react@17.0.2/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"
    ></script>

    <script src="./babel.min.js"></script>

    <script type="text/babel">
      let user = {
        name: 'tsj',
        age: 16,
      }
      // const div = (
      //   <div>
      //     <h1>{user.name}</h1>

      //     {user.age >= 18 ? (
      //       <p>成年人喜欢看的电影</p>
      //     ) : (
      //       <p>小朋友喜欢看的动画片</p>
      //     )}
      //   </div>
      // )

      // 如果: user.name是tsj,就是展示h1标签,如果不是就不展示
      // const div = <div>{user.name === 'tsj' ? <h1>lt,也是lsp</h1> : ''}</div>
      const div = <div>{user.name === 'tsj' && <h1>lt,也是lsp</h1>}</div>
      ReactDOM.render(div, document.getElementById('root'))
    </script>
  </body>
</html>
